
<!--
All rights Reserved, Designed By www.youyacao.com
@Description:视频列表
@author:成都市一颗优雅草科技有限公司
@version V4.2
注意：本前端源码遵循 MIT开源协议本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584
开源gitee地址：https://gitee.com/youyacao/songshu-video-page
 -->


<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 视频列表
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          icon="el-icon-delete"
          class="handle-del mr10"
          @click="delAllSelection"
        >批量删除
        </el-button>
        <el-select
          v-model="type_1"
          placeholder="一级分类"
          class="handle-select mr10"
          @change="changeType"
        >
          <el-option label="无" value=""></el-option>
          <el-option
            v-for="(item,index) in typeList"
            :key="index"
            :label="item.name"
            :value="index"
          ></el-option>
        </el-select>
        <el-select v-model="query.type" placeholder="二级分类" class="handle-select mr10">
          <el-option label="无" value=""></el-option>
          <el-option
            v-for="(item,index) in subTypeList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-select v-model="query.state" placeholder="审核状态" class="handle-select mr10">
          <el-option label="无" value=""></el-option>
          <el-option key="0" label="待审核" value="0"></el-option>
          <el-option key="1" label="已通过" value="1"></el-option>
          <el-option key="2" label="未通过" value="2"></el-option>
        </el-select>
        <el-input v-model="query.name" placeholder="标题" class="handle-input input-title  mr10"></el-input>
        <el-input v-model="query.uid" placeholder="用户ID" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button
          style="float: right;margin-bottom:20px; "
          type="primary"
          icon="el-icon-lx-add"
          class="handle-del mr10"
          @click="addVideo"
        >添加
        </el-button>
        <el-button
          style="float: right;margin-bottom:20px; "
          type="primary"
          icon="el-icon-lx-add"
          class="handle-del mr10"
          @click="batchAddVideo"
        >批量添加
        </el-button>
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            {{scope.row.ptype_name+">"+scope.row.type_name}}
          </template>
        </el-table-column>
        <el-table-column label="发布用户" align="center">
          <template slot-scope="scope">
            {{scope.row.name==null?'未设置':scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column label="视频链接" align="center">
          <template slot-scope="scope">
            <el-link :href="$utils.formatUrl(scope.row.url)" type="primary" target="_blank">点击查看</el-link>
          </template>
        </el-table-column>
        <el-table-column label="预览图(查看大图)" align="center">
          <template slot-scope="scope">
            <el-image
              class="table-td-thumb"
              :src="$utils.formatUrl(scope.row.img)"
              :preview-src-list="[$utils.formatUrl(scope.row.img)]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="发布时间"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="点击修改状态" placement="right">
              <el-tag class="pointer" v-if="scope.row.state==0" type="" @click="handleState(scope.$index, scope.row)">
                待审核
              </el-tag>
            </el-tooltip>
            <el-tag v-if="scope.row.state==1" type="success">已发布</el-tag>
            <el-tag v-if="scope.row.state==2" type="danger">已拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleSubject(scope.row)"
            >题库
            </el-button>
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑
            </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.page"
          :page-size="query.pageSize"
          :total="total"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

        <!-- 题库弹出框 -->
    <el-dialog title="题库" :visible.sync="subjectVisible" width="90%">
      <div style="margin-bottom:-5px;">
        视频答题是否开启
      <el-switch v-model="this.is_subject" active-color="#13ce66" @change="handleIsSubject" inactive-color="#ff4949"></el-switch>
      <el-button type="success" @click="addSubject" style="float:right;margin-bottom:15px;">添加题目</el-button>
      </div>
      <el-table
        :data="subjectList"
        border
        class="table"
        header-cell-class-name="table-header"
      >
        <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
        <el-table-column prop="seconds" label="出题时间(秒)" width="200"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column label="正确选项" width="100">
          <template slot-scope="scope">
            {{ '选项'+ (parseInt(scope.row.true_answer)+1) }}
          </template>
        </el-table-column>
        <el-table-column prop="gold" label="答对得金币" width="100"></el-table-column>
        <el-table-column label="状态" align="center"  width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==1" type="success">启用</el-tag>
            <el-tag v-if="scope.row.status==0" type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleSubjectEdit(scope.row)"
            >编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 题库弹出框 -->
    <el-dialog title="题库" :visible.sync="addSubjectVisible" width="60%">
      <el-form ref="subjectForm" :model="subject" label-width="140px">
        <el-form-item label="出题秒数（s）">
          <el-input v-model="subject.seconds" placeholder="题目出现在视频秒数（整数）"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="subject.title"  placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="选项">
          <el-button type="success" @click="addSubjectOption">添加</el-button>
        </el-form-item>
        <el-form-item label="">
          <el-input v-for="item in subjectOptions" :key="item.label" v-model="subject.options[item.value]" :placeholder="item.label"></el-input>
        </el-form-item>
        <el-form-item label="正确答案选项">
          <el-select v-model="subject.true_answer" placeholder="请选择正确选项" class="handle-select mr10">
            <el-option v-for="item in subjectOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回答正确增加金币">
          <el-input v-model="subject.gold" style="width:400px;"  placeholder="回答正确增加金币(整数)"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="subject.status" placeholder="" class="handle-select mr10">
            <el-option key="1" label="启用" value="1"></el-option>
            <el-option key="0" label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="subjectSubmit">保 存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="发布用户ID">
          <el-input v-model="form.uid"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="用户">
          <el-select v-model="form.uid" filterable placeholder="用户">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类">
          <el-select
            v-model="form.pid"
            placeholder="一级分类"
            class="handle-select mr10"
            @change="changeType1"
          >
            <el-option label="无" value=""></el-option>
            <el-option
              v-for="(item,index) in typeList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-select v-model="form.type" placeholder="二级分类" class="handle-select mr10">
            <el-option label="无" value=""></el-option>
            <el-option
              v-for="(item,index) in subTypeList"
              :key="index"
              :label="item.name"
              :value="''+item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="视频地址">
          <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="预览图">
          <el-input v-model="form.img"></el-input>
        </el-form-item>
        <el-form-item label="购买所属金币">
          <el-input v-model="form.need_gold" placeholder="默认0为不需要购买"></el-input>
        </el-form-item>
        <el-form-item label="点赞数">
          <el-input v-model="form.skr_count" placeholder="点赞数"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加弹出框 -->
    <el-dialog title="添加视频" :visible.sync="addVisible" width="30%">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="发布用户ID">
          <el-input v-model="form.uid"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <!--<el-form-item label="用户">
          <el-select v-model="form.uid" filterable placeholder="用户">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
            </el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="分类">
          <el-select
            v-model="form.pid"
            placeholder="一级分类"
            class="handle-select mr10"
            @change="changeType1"
          >
            <el-option label="无" value=""></el-option>
            <el-option
              v-for="(item,index) in typeList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-select v-model="form.type" placeholder="二级分类" class="handle-select mr10">
            <el-option label="无" value=""></el-option>
            <el-option
              v-for="(item,index) in subTypeList"
              :key="index"
              :label="item.name"
              :value="''+item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="视频">
          <el-upload
            class="upload-demo"
            :limit="1"
            :show-file-list="false"
            :data="{type:'video'}"
            :action="$store.state.frontUrl+'/api/api/upload'"
            :file-list="fileList"
            list-type="picture"
            :on-success="uploadVideoSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>

          </el-upload>
          <el-input type="text" placeholder="视频地址" v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="图片地址">
          <el-image v-show="form.img" class="type-icon" :preview-src-list="[$utils.formatUrl(form.img)]"
                    :src="$utils.formatUrl(form.img)"></el-image>
          <el-upload
            class="upload-demo"
            :limit="1"
            :show-file-list="false"
            :data="{type:'img'}"
            :action="$store.state.frontUrl+'/api/api/upload'"
            :file-list="fileList"
            list-type="picture"
            :on-success="uploadVideoSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <el-input type="text" placeholder="图片地址" v-model="form.img"></el-input>
        </el-form-item>
        <el-form-item label="购买所属金币">
          <el-input v-model="form.need_gold" placeholder="默认0为不需要购买"></el-input>
        </el-form-item>
        <el-form-item label="点赞数">
          <el-input v-model="form.skr_count" placeholder="点赞数"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addVideoSubmit">确 定</el-button>
      </span>
    </el-dialog>


    <!-- 批量添加弹出框 -->
    <el-dialog title="添加视频" :visible.sync="batchAddVisible" width="80%" heigth="800">
      <el-button type="success" @click="batchAddMore">添  加</el-button>
      <el-row>
        <el-col :span="12">
          <el-form ref="batchForm" v-for="forms in batchForm" :key="forms.id" label-width="100px">
              <el-divider>第{{ forms.id }}个</el-divider>
              <el-form-item label="发布用户ID">
                <el-input v-model="forms.uid"></el-input>
              </el-form-item>
              <el-form-item label="标题">
                <el-input v-model="forms.title"></el-input>
              </el-form-item>
              <el-form-item label="分类">
                <el-select
                  v-model="forms.pid"
                  placeholder="一级分类"
                  class="handle-select mr10"
                  @change="changeType1"
                >
                  <el-option label="无" value=""></el-option>
                  <el-option
                    v-for="(item,index) in typeList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-select v-model="forms.type" placeholder="二级分类" class="handle-select mr10">
                  <el-option label="无" value=""></el-option>
                  <el-option
                    v-for="(item,index) in subTypeList"
                    :key="index"
                    :label="item.name"
                    :value="''+item.id"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="视频">
                <el-input type="text" placeholder="视频地址" v-model="forms.url"></el-input>
              </el-form-item>
              <el-form-item label="图片地址">
                <el-input type="text" placeholder="图片地址" v-model="forms.img"></el-input>
              </el-form-item>
              <el-form-item label="购买所属金币">
                <el-input v-model="forms.need_gold" placeholder="默认0为不需要购买"></el-input>
              </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="12" style="padding:50px;">
          <el-upload
            class="upload-demo"
            :limit="1"
            :show-file-list="false"
            :data="{type:'video'}"
            :action="$store.state.frontUrl+'/api/api/upload'"
            :file-list="fileList"
            list-type="picture"
            :on-success="batchUploadVideoSuccess"
          >
          <el-button size="small" type="primary">点击视频上传(自动填入最新空的位置)</el-button>
          </el-upload>
          <el-input type="text" placeholder="视频地址" v-model="batchFormUrl"></el-input>
          <el-input type="text" placeholder="图片地址" v-model="batchFormImg"></el-input>
        </el-col>
      </el-row>
            <el-button @click="batchAddVisible = false">取 消</el-button>
            <el-button type="primary" @click="batchAddVideoSubmit">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'basetable',
    data() {
      return {
        fileList: [],
        query: {
          name: '',
          page: 1,
          type: '',
          state: '',
          uid: '',
          pageSize: 10
        },
        tableData: [],
        multipleSelection: [],
        delList: [],
        editVisible: false,
        addVisible: false,
        batchAddVisible: false,
        subjectVisible: false,
        addSubjectVisible: false,
        total: 0,
        form: {},
        batchFormImg: '',
        batchFormUrl: '',
        batchFormIdUp: 1,
        batchFormId: 1,
        batchForm: [{
          id: 1,
          uid: '',
          title: '',
          pid: '',
          type: '',
          url: '',
          img: '',
          need_gold: 0
        }],
        idx: -1,
        id: -1,
        typeList: [],
        subTypeList: [],
        type_1: '',
        userList: [],
        vid: 0,
        is_subject: false,
        subject: {
          id: 0,
          vid: 0,
          seconds: '',
          title: '',
          options: [],
          true_answer: '',
          gold: 0,
          status: '1'
        },
        subjectList: [],
        subjectOptions: [{
          label: '选项1',
          value: 0
        }],
        answerOptions: [],
        optionsNum: 0
      }
    },
    created() {
      this.getType()
      this.getData()
      //this.getAllUser()
    },
    methods: {
      uploadVideoSuccess (response, file, fileList) {
        if (response.code === 0) {
          if(response.data.img==null){
            this.form.img = response.data.url;
            this.fileList = []
            return;
          }
          this.form.url = response.data.url
          this.form.img = response.data.img
          this.fileList = []
        } else {
          this.fileList = []
          this.$message.error('上传失败,' + response.msg)
        }
      },
      batchUploadVideoSuccess (response, file, fileList) {
        if (response.code === 0) {
          if(response.data.img==null){
            this.batchFormImg = response.data.url;
            this.fileList = []
            return;
          }
          this.batchFormUrl = response.data.url
          this.batchFormImg = response.data.img
          this.batchForm.forEach(item => {
            if(item.id == this.batchFormIdUp) {
              item.url = this.batchFormUrl
              item.img = this.batchFormImg
            }
          })
          this.fileList = []
          this.batchFormIdUp++;
        } else {
          this.fileList = []
          this.$message.error('上传失败,' + response.msg)
        }
      },
      getAllUser() {
        this.$api.user.listAll({}).then(res => {
          this.userList = res.data
        })
      },
      getType() {
        this.$api.type.list({}).then(res => {
          this.typeList = res.data
        })
      },
      // 获取 easy-mock 的模拟数据
      getData() {
        this.$api.video.list(this.query).then(res => {
          this.tableData = res.data
          this.total = res.total || 0
        })
      },
      changeType(index) {
        this.query.type = ''
        this.subTypeList = this.typeList[index].sub_type
      },
      changeType1(index) {
        this.typeList.map((item,i)=>{
          if(index==item.id){
            this.subTypeList = item.sub_type
            this.form.ptype_name = item.name
          }
        })

        this.form.type =""+this.subTypeList[0].id
      },
      // 触发搜索按钮
      handleSearch() {
        this.$set(this.query, 'page', 1)
        this.getData()
      },
      // 删除操作
      handleDelete(index, row) {
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        })
          .then(() => {
            var arr = [row.id]
            this.$api.video.delete({ids: arr}).then(res => {
              if (res.code == 1) {
                this.$message.error('删除失败,' + res.msg)
                return
              }
              this.getData()
              this.$message.success('删除成功')
            })
          })
          .catch(() => {
          })
      },
      // 多选操作
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      delAllSelection() {
        const length = this.multipleSelection.length
        var arr = []
        this.delList = this.delList.concat(this.multipleSelection)
        for (let i = 0; i < length; i++) {
          arr.push(this.multipleSelection[i].id)
        }
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        })
          .then(() => {
            this.$api.video.delete({ids: arr}).then(res => {
              if (res.code == 1) {
                this.$message.error('删除失败,' + res.msg)
                return
              }
              this.getData()
              this.$message.success('删除成功')
            })
          })
          .catch(() => {
          })
        this.multipleSelection = []
      },
      getSubjectList() {
        this.$api.videoSubject.list({vid: this.subject.vid}).then(res => {
          if (res.data) {
            this.subjectList = res.data
          }
        })
      },
      handleSubject(row) {
        this.subject.vid = row.id
        if (row.is_subject == 1) {
          this.is_subject = true
        } else {
          this.is_subject = false
        }
        this.subjectList = []
        this.getSubjectList()
        this.subjectVisible = true
      },
      addSubjectOption() {
        this.subjectOptions.push({
          label: '选项' + (this.optionsNum + 1),
          value: this.optionsNum
        })
        this.optionsNum++
      },
      handleSubjectEdit(row) {
        this.optionsNum = 0
        this.subjectOptions = []
        this.subject.id = row.id
        this.subject.vid = row.vid
        this.subject.seconds = row.seconds
        this.subject.title = row.title
        for(let index in row.options) {
          this.subjectOptions.push({
            label: '选项' + (parseInt(index) + 1),
            value: index
          })
          this.optionsNum++
        }
        this.subject.options = row.options
        this.subject.true_answer = row.true_answer.toString()
        this.subject.gold = row.gold
        this.subject.status = row.status.toString()
        this.addSubjectVisible = true
      },
      subjectSubmit() {
        this.$api.videoSubject.update(this.subject).then(res => {
          if (res.code === 1) {
            this.$message.error(res.msg)
            return
          }
          this.$message.success(res.msg)
          this.getSubjectList()
          this.addSubjectVisible = false
          this.optionsNum = 0
          this.subjectOptions = []
          this.subject.id = 0
          this.subject.seconds = ''
          this.subject.title = ''
          this.subject.options = []
          this.subject.true_answer = ''
          this.subject.gold = 0
          this.subject.status = '1'
        })
      },
      handleIsSubject(val) {
        this.is_subject = val
        this.$api.videoSubject.isSubject({vid: this.subject.vid, status: val}).then(res => {
          if (res.code === 1) {
            this.$message.error(res.msg)
            return
          }
          this.$message.success(res.msg)
          this.getData()
        })
      },
      addSubject() {
        this.addSubjectVisible = true
      },
      handleEdit(index, row) {
        this.idx = index
        this.form = row
        this.typeList.map((item,i)=>{
          if(this.form.pid==item.id){
            this.subTypeList = item.sub_type

          }
        })
        this.editVisible = true

      },// 审核操作
      handleState(index, row) {
        this.$confirm('是否通过审核?', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          let temp_row = row
          temp_row.state = 1
          this.$api.video.update(temp_row).then(res => {
            if (res.code == 1) {
              this.$message.error(`修改失败,` + res.msg)
              return
            }
            this.editVisible = false
            this.$message.success(`修改成功`)
            this.getData()
          })
        }).catch(() => {
          let temp_row = row
          temp_row.state = 2
          this.$api.video.update(temp_row).then(res => {
            if (res.code == 1) {
              this.$message.error(`修改失败,` + res.msg)
              return
            }
            this.editVisible = false
            this.$message.success(`修改成功`)
            this.getData()
          })
        })
      },
      // 保存编辑
      saveEdit() {
        this.subTypeList.map((item,i)=>{
          if(this.form.type==item.id){
            this.form.type_name = item.name
          }
        })
        this.$api.video.update(this.form).then(res => {
          if (res.code == 1) {
            this.$message.error(`修改失败,` + res.msg)
            return
          }
          this.editVisible = false
          this.$message.success(`修改成功`)
          this.$set(this.tableData, this.idx, this.form)
        })
      },
      // 分页导航
      handlePageChange(val) {
        this.$set(this.query, 'page', val)
        this.getData()
      },
      addVideo() {
        this.form = {};
        this.addVisible = true;
      },
      addVideoSubmit() {

        this.$api.video.add(this.form).then(res => {
          if (res.code == 1) {
            this.$message.error(res.msg)
            return
          }
          this.addVisible = false
          this.$message.success(`添加成功`)
          this.getData()
        })
      },
      batchAddVideo() {
        this.batchAddVisible = true;
      },
      batchAddMore() {
        this.batchFormId++
        this.batchForm.push({
          id: this.batchFormId,
          uid: '',
          title: '',
          pid: '',
          type: '',
          url: '',
          img: ''
        })
      },
      batchAddVideoSubmit() {
        console.log(this.batchForm)
        let suc = true;
        this.batchForm.forEach(item => {
          if (item.uid == ''){
            suc = false;
            this.$message.error('请填写完整用户UID')
            return false;
          }
          if (item.title == ''){
            suc = false;
            this.$message.error('请填写完整视频标题')
            return false;
          }
          if (item.url == ''){
            suc = false;
            this.$message.error('请填写完整视频地址')
            return false;
          }
          if (item.img == ''){
            suc = false;
            this.$message.error('请填写完整视频预览图片')
            return false;
          }
          if (item.type == ''){
            suc = false;
            this.$message.error('请选择二级分类')
            return false;
          }
        });
        if (!suc) {
           return false;
        }
        let msg = '';
        this.batchForm.forEach(item => {
          this.$api.video.add(item).then(res => {
            if (res.code == 1) {
              msg += '第'+item.id+ '个 失败原因：' + res.msg;
            }
          })
        })
        if (msg != '') {
          this.$message.error(msg)
        }
        let that = this
        setTimeout(function() {
          that.batchAddVisible = false
          that.$message.success(`添加成功`)
          that.getData()
        }, 2000);
      }
    }
  }
</script>

<style scoped>
  .pointer {
    cursor: pointer;
  }

  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 100px;
    display: inline-block;
  }

  .input-title {
    width: 200px;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }

  .table-td-thumb {
    display: inline-block;
    margin: auto;
    height: 60px;
    width: 80px;
  }
</style>
